<template>
	<view class="container">
		<z-paging-swiper>
			<template #top>
				<view class="tabs-container">
					<view v-for="(item,index) in catalogs" :key="index"
						:class="(current == index) ? 'tabs-select' : 'tabs-normal'" @click="tabsClick(index)">
						{{item}}
					</view>
				</view>
			</template>

			<swiper @change="swiperChange" :current="current">
				<swiper-item>
					<z-paging ref="paging_list" :fixed="false" v-model="data_list" @query="queryList">
						<view v-for="(item,index) in data_list" :key="index" show-refresher-when-reload>
							<xuexi-list-item :item="item"></xuexi-list-item>
						</view>
					</z-paging>
				</swiper-item>

				<swiper-item>
					<z-paging ref="paging_mine" :fixed="false" v-model="data_mine" @query="queryMineList">
						<view v-for="(item,index) in data_mine" :key="index" show-refresher-when-reload>
							<xuexi-list-item :item="item"></xuexi-list-item>
						</view>
					</z-paging>
				</swiper-item>
			</swiper>

		</z-paging-swiper>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	const current = ref(0)

	const catalogs = ref(["课程列表", "我的课程"])

	const paging_list = ref(null)
	const paging_mine = ref(null)

	const data_list = ref([])
	const data_mine = ref([])

	const db_list = uniCloud.importObject('courseObj', {
		customUI: true
	})

	const db_mine = uniCloud.importObject('userCourseObj', {
		customUI: true
	})

	const queryList = (pageNo, pageSize) => {
		db_list.getList((pageNo - 1) * pageSize, pageSize).then(res => {
			paging_list.value.complete(res.data);
		}).catch(res => {
			paging_list.value.complete(false);
		})
	}

	const queryMineList = (pageNo, pageSize) => {
		db_mine.getList((pageNo - 1) * pageSize, pageSize).then(res => {
			paging_mine.value.complete(res.data);
		}).catch(res => {
			paging_mine.value.complete(false);
		})
	}

	function tabsClick(params) {
		current.value = params
	}

	function swiperChange(e) {
		current.value = e.detail.current
	}
</script>

<style lang="scss">
	page {
		background: $me-color-background;
	}
</style>

<style lang="scss" scoped>
	.container {
		.tabs-container {
			display: flex;
			height: 80rpx;

			.tabs-select {
				flex: 1;
				font-size: 32rpx;
				color: #798490;
				background-color: white;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.tabs-normal {
				flex: 1;
				font-size: 32rpx;
				color: #fff;
				background-color: #798490;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		swiper {
			height: 100%;
		}
	}
</style>